import React, { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Checkbox } from './ui/checkbox';
import { UserRole } from '../App';
import { GraduationCap, Users, Shield } from 'lucide-react';

interface LoginFormProps {
  onLogin: (data: { username: string; password: string; role: UserRole }) => void;
}

export function LoginForm({ onLogin }: LoginFormProps) {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);
  const [currentRole, setCurrentRole] = useState<UserRole>('student');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // Simulate API call
    setTimeout(() => {
      onLogin({ username, password, role: currentRole });
      setIsLoading(false);
    }, 1000);
  };

  const roleConfig = {
    student: {
      icon: GraduationCap,
      title: '学生登录',
      description: '访问课程、成绩和个人信息'
    },
    teacher: {
      icon: Users,
      title: '教师登录',
      description: '管理课程、录入成绩和考勤'
    },
    admin: {
      icon: Shield,
      title: '管理员登录',
      description: '系统管理和数据统计'
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground">
            <GraduationCap className="h-6 w-6" />
          </div>
          <CardTitle className="text-2xl">教务管理系统</CardTitle>
          <CardDescription>
            请选择登录身份并输入您的凭据
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={currentRole} onValueChange={(value) => setCurrentRole(value as UserRole)} className="mb-6">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="student">学生</TabsTrigger>
              <TabsTrigger value="teacher">教师</TabsTrigger>
              <TabsTrigger value="admin">管理员</TabsTrigger>
            </TabsList>
            
            {Object.entries(roleConfig).map(([role, config]) => (
              <TabsContent key={role} value={role} className="text-center py-4">
                <config.icon className="mx-auto h-8 w-8 mb-2 text-primary" />
                <h3 className="font-medium">{config.title}</h3>
                <p className="text-sm text-muted-foreground">{config.description}</p>
              </TabsContent>
            ))}
          </Tabs>

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="username">
                {currentRole === 'student' ? '学号' : currentRole === 'teacher' ? '工号' : '用户名'}
              </Label>
              <Input
                id="username"
                type="text"
                placeholder={
                  currentRole === 'student' ? '请输入学号' :
                  currentRole === 'teacher' ? '请输入工号' : '请输入用户名'
                }
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                required
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="password">密码</Label>
              <Input
                id="password"
                type="password"
                placeholder="请输入密码"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="remember"
                  checked={rememberMe}
                  onCheckedChange={setRememberMe}
                />
                <Label htmlFor="remember" className="text-sm">记住我</Label>
              </div>
              <Button variant="link" size="sm" className="p-0 h-auto">
                忘记密码？
              </Button>
            </div>
            
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? '登录中...' : '登录'}
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}